<%--
  Created by IntelliJ IDEA.
  User: 子玉
  Date: 2020/7/27
  Time: 13:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>个人中心</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Logistic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>
    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation,AMap.MouseTool"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/tapmodo-Jcrop/css/jquery.Jcrop.css"/>
    <script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>
</head>
<style>
    .userImage {
        width: 100px;
        height: 100px;
        /*border-radius: 50px;*/
        overflow: hidden;
    }

    body img {
        max-width: unset;
    }


    a.changeFace:hover:before {
        z-index: 9;
        content: '修改头像';
        position: absolute;
        width: 100px;
        height: 100px;
        opacity: 0.7;
        background: #000;
        text-align-all: center;
        color: white;
        line-height: 100px;
        /*text-align: center;*/
    }

    .file {
        position: relative;
        /*display: inline-block;*/
        /*background: #D0EEFF;*/
        /*border: 1px solid #99D3F5;*/
        /*border-radius: 4px;*/
        /*padding: 4px 12px;*/
        overflow: hidden;
        /*color: #1E88C7;*/
        /*text-decoration: none;*/
        /*text-indent: 0;*/
        /*line-height: 20px;*/
        /*width: 92px;*/
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }


</style>

<body>
<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2 layui-bg-cyan">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded" style="z-index: 1;">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">快递</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <%--        登录用户容器--%>
        <div id="userDiv" class="ml-auto top-grid d-flex"></div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-location-arrow ml-3 location-icon align-self-end"></a>
        </div>
        <!-- top header -->

    </div>
</header>
<!-- //header -->
<!-- inner banner -->
<!-- gallery -->
<div class="gallery" id="gallery">
    <div class="row mx-auto w-75 p-3">
        <div class="col-2 p-3 rounded">
            <div class="text-center">
                <div class="userImage mx-auto">
                    <a href="javascript:void(0);" class="changeFace" style="height: 100%;">
                        <img src="${pageContext.request.contextPath}/fileDownload/getUserFace?faceName=${sessionScope.user.userFace}"
                             width="100" id="userFacePanel"/>
                    </a>

                </div>
            </div>
            <div class="p-2 pt-3 rounded">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#userInfo" role="tab"
                       aria-controls="v-pills-home" aria-selected="true">个人资料</a>
                    <a class="nav-link" id="myPackages-tab" data-toggle="pill" href="#myPackages" role="tab"
                       aria-controls="v-pills-profile" aria-selected="false">我的快递</a>
                    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#myAddressInfo" role="tab"
                       aria-controls="v-pills-messages" aria-selected="false">地址簿管理</a>
                </div>
            </div>

        </div>
        <div class="col-10">
            <div class="tab-content p-2" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="userInfo" role="tabpanel"
                     aria-labelledby="v-pills-home-tab">
                    <form id="updateForm" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="x" id="pic-x" value="0"/>
                        <input type="hidden" name="y" id="pic-y" value="0"/>
                        <input type="hidden" name="destWidth" id="destWidth" value="0"/>
                        <input type="hidden" name="destHeight" id="destHeight" value="0"/>
                        <input type="hidden" name="finalWidth" id="finalWidth" value="0"/>
                        <input type="hidden" name="finalHeight" id="finalHeight" value="0"/>
                        <div class="row">
                            <div class="col-4">
                                <a href="javascript:void(0)" class="btn btn-primary mx-auto select_picture file"
                                   style="display: none"><input type="file" name="userFace" id="file"
                                                                accept="image/jpg,image/jpeg,image/png"
                                                                onchange="setImagePreview()"></a>
                                <div class="form-group  cutImgPanel text-center w-100">

                                </div>
                            </div>
                            <div class="col-8">
                                <div class="form-group">
                                    <label for="userName">用户名</label>
                                    <input type="text" class="form-control" id="userName" name="userName"
                                           readonly="readonly">
                                </div>


                                <div class="form-group">
                                    <label for="telephone">Telephone</label>
                                    <input type="text" class="form-control" id="telephone" name="telephone"
                                           readonly="readonly">
                                </div>
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" class="form-control" id="password" name="password"
                                           aria-describedby="passwordTip" readonly="readonly">
                                    <small id="passwordTip" class="form-text text-muted">We'll never share your password
                                        with
                                        anyone else.
                                    </small>
                                </div>
                                <button type="button" class="btn btn-warning" id="update">Update</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                <button type="button" class="btn btn-primary" id="commit" disabled="disabled">Commit
                                </button>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="myPackages" role="tabpanel"
                     aria-labelledby="v-pills-profile-tab">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title row ">
                            <li class="layui-this col"><h5 class="font-weight-bold">我寄的</h5></li>
                            <li class="col"><h5 class="font-weight-bold">我收的</h5></li>
                        </ul>
                        <div class="layui-tab-content">
                            <div id="mySend" class="layui-tab-item layui-show">

                            </div>
                            <div id="myReceive" class="layui-tab-item">


                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="myAddressInfo" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                    ...
                </div>
            </div>

        </div>


    </div>


    <div class="container py-md-3">
        <%--个人信息部分--%>

    </div>
</div>
<!-- gallery popups -->
<!-- popup-->
<!-- footer-top -->
<section class="footer-top py-5">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->

<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li><a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li><a href="about.html">About Our Company</a></li>
                    <li><a href="services.html">Logistics Services</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                    <li><a href="#">Privicy Policy</a></li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..." required="">
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by <a href="http://w3layouts.com/">W3layouts</a></p>
        </div>
    </div>
</div>
<!-- //footer -->
<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/tapmodo-Jcrop/js/jquery.Jcrop.js"></script>
<script>
    $(function () {
        layui.use(['layer', 'form', 'element'], function () {
            layer = layui.layer;
            form = layui.form;
            element = layui.element;
            element.on('tab(docDemoTabBrief)', function (data) {
                switch (data.index) {
                    case 0:
                        findMySendAjax();
                        break;
                    case 1:
                        findMyReceiveAjax();
                        break;
                    default:
                        break;
                }
            });
            // 选项卡切换监听
        });
        if ("${sessionScope.user.userId}" !== '') {
            loginUser = {};
            loginUser.userId = "${sessionScope.user.userId}";
            loginUser.userName = "${sessionScope.user.userName}";
            loginUser.userFace = "${sessionScope.user.userFace}";
            loginUser.uaerPhone = "${sessionScope.user.userPhone}";
            detectLogin();
            detectLocation();
        } else {
            window.location.href = window.location.protocol + '//' + window.location.host + '/index.jsp';
        }
        $.ajax({
            async: true,
            type: "get",
            url: "/user/selectUserView",
            data: {userId: loginUser.userId},
            success: function (result) {
                // 渲染
                $("#userName").val(result.userName);
                $("#telephone").val(result.userPhone);
                var userFace = result.userFace;
                if (userFace == null) {
                    $("#userFacePanel").prop("src", "/fileDownload/getUserFace?faceName=defaultUser.jpg");
                } else {
                    $("#userFacePanel").prop("src", "/fileDownload/getUserFace?faceName=" + userFace);
                }
            },
            error: function () {
                alert("异步请求失败！");
            }

        });
    })
    $('.changeFace').click(function () {
        $('#file').click();
    })

    function iniJcrop() {
        $('#cutImg').Jcrop({
            onChange: AddParams,
            onSelect: AddParams,
            setSelect: [200, 200, 0, 0],
            aspectRatio: 1
        });
    }


    // 添加隐藏域数据

    function AddParams(coords) {
        //			console.log(coords)
        $('.cutImgPanel img');
        $('#pic-x').val(coords.x);
        $('#pic-y').val(coords.y);
        $('#destWidth').val(coords.w);
        $('#destHeight').val(coords.h);
        $('#finalWidth').val($('.cutImgPanel img').css('width').replace(/px/g, ''));
        $('#finalHeight').val($('.cutImgPanel img').css('height').replace(/px/g, ''));
        fixImg(coords);
    }

    // 修正图片
    function fixImg(coords) {
        let $cutImg = $('#cutImg');
        let $userFacePanel = $('#userFacePanel');
        $userFacePanel.css("width", ($cutImg.width() * 100) / coords.w);
        $userFacePanel.css("height", ($cutImg.height() * 100) / coords.h);
        $userFacePanel.css("margin-left", -((100 * coords.x) / coords.w));
        $userFacePanel.css("margin-top", -((100 * coords.y) / coords.h));
    }


    function setImagePreview() {
        // 得到文件列表数组,获取数组中的第一个文件
        var file = document.getElementById("file").files[0];
        // 没有选择文件
        if (file == null) {
            document.getElementById("userFacePanel").src = "${pageContext.request.contextPath}/fileDownload/getUserFace?faceName=${sessionScope.user.userFace}";
            $('#userFacePanel').css("width", 100);
            emptyPic()
        } else {
            // 构建一个文件渲染对象
            var reads = new FileReader();
            // FileReader.readAsDataURL 读取指定Blob或File的内容
            reads.readAsDataURL(file);
            // 获取文件数据
            reads.onload = function () {
                // 显示图片
                document.getElementById("userFacePanel").src = this.result;
                let $cutImgPanel = $('.cutImgPanel');
                $cutImgPanel.html("");
                $cutImgPanel.append('<img src="' + this.result + '" id="cutImg" class="img-thumbnail mx-auto" style="width: 100%;" />');
                $cutImgPanel.append('<button type="button" class="btn btn-primary px-4 mt-3" onclick="emptyPic()">确定</button>');
                iniJcrop();
            }
        }

    }

    function emptyPic() {
        $('.cutImgPanel').empty();
    }


    function findMyReceiveAjax() {
        $.ajax({
            async: true,
            type: "get",
            url: "/order/getMyOrder",
            data: {
                userPhone: '${sessionScope.user.userPhone}',
                isSend: false
            },
            success: function (result) {
                fillMyReceive(result);
            },
            error: function () {
                alert("异步请求失败！");
            }
        });
    }

    $(document).on('click', '#myPackages-tab', function () {
        findMySendAjax();
    })

    function findMySendAjax() {
        $.ajax({
            async: true,
            type: "get",
            url: "/order/getMyOrder",
            data: {
                userPhone: '${sessionScope.user.userPhone}',
                isSend: true
            },
            success: function (result) {
                fillMySend(result);
            },
            error: function () {
                alert("异步请求失败！");
            }
        });
    }

    function fillMyReceive(data) {
        let $myReceive = $('#myReceive');
        $myReceive.empty()
        $.each(data, function () {
            btnInfo = '<a class="btn btn-primary ml-auto disabled" href="${pageContext.request.contextPath}/front/track.jsp">不可用</a>';

            let state = '未知状态';
            if (this.state === 1) {
                btnInfo = '<a class="btn btn-primary ml-auto" href="${pageContext.request.contextPath}/front/track.jsp?orderId=' + this.orderId + '">查看物流信息</a>';
                state = '运输中';
            }

            let content =
                '<div class="layui-anim layui-anim-fadein m-3 rounded shadow-lg p-3">' +
                '<h5 class="font-weight-bold fa fa-cubes fa-2x m-2">' + this.orderId + '</h5>' +
                '<div class="justify-content-between m-2 d-flex">' +
                '<div class="d-flex align-self-center">' +
                '<div class="mr-auto">' +
                '<h4 class="font-weight-bold">' + this.sendId.address.city + '</h4>' +
                '<h6 class="text-center">' + this.sendId.personName + '</h6>' +
                '</div>' +
                '<span class="mr-4 ml-4 fa fa-2x fa-arrow-circle-o-right align-self-center"></span>' +
                '<div class="ml-auto">' +
                '<h4 class="font-weight-bold" s>' + this.receiveId.address.city + '</h4>' +
                '<h6 class="text-center">' + this.receiveId.personName + '</h6>' +
                '</div>' +
                '</div>' +
                '<h4 class="ml-auto align-self-center font-weight-bold">' + state + '</h4>' +
                '<div class="ml-auto align-self-center d-flex">' +
                '<span class="fa fa-2x fa-cny"></span>' +
                '<h4 class="ml-2 align-self-center font-weight-bold">' + this.cost + '元</h4>' +
                '</div>' +
                '<div class="ml-3 align-self-center">' +
                btnInfo +
                '</div>' +
                '</div>' +
                '</div>';
            $myReceive.append(content)
        })
    }

    function fillMySend(data) {
        let $mySend = $('#mySend');
        $mySend.empty()
        $.each(data, function () {
            btnInfo = '<a class="btn btn-primary ml-auto" href="${pageContext.request.contextPath}/front/track.jsp?orderId=' + this.orderId + ' disabled">查看物流信息</a>';

            let state = '未知状态';
            if (this.state === 0) {
                state = '待支付';
                btnInfo = '<a target="_blank" class="btn btn-warning ml-auto" href="${pageContext.request.contextPath}/order/payOrder?orderId=' + this.orderId + '&cost=' + this.cost + '">去支付</a>';
            } else if (this.state === 1) {
                btnInfo = '<a class="btn btn-primary ml-auto" href="${pageContext.request.contextPath}/front/track.jsp?orderId=' + this.orderId + '">查看物流信息</a>';
                state = '运输中';
            } else {

                state = '已完成';
            }
            let content =
                '<div class="layui-anim layui-anim-fadein m-3 rounded shadow-lg p-3">' +
                '<h5 class="font-weight-bold fa fa-cubes fa-2x m-2">' + this.orderId + '</h5>' +
                '<div class="justify-content-between m-2 d-flex">' +
                '<div class="d-flex align-self-center">' +
                '<div class="mr-auto">' +
                '<h4 class="font-weight-bold">' + this.sendId.address.city + '</h4>' +
                '<h6 class="text-center">' + this.sendId.personName + '</h6>' +
                '</div>' +
                '<span class="mr-4 ml-4 fa fa-2x fa-arrow-circle-o-right align-self-center"></span>' +
                '<div class="ml-auto">' +
                '<h4 class="font-weight-bold" s>' + this.receiveId.address.city + '</h4>' +
                '<h6 class="text-center">' + this.receiveId.personName + '</h6>' +
                '</div>' +
                '</div>' +
                '<h4 class="ml-auto align-self-center font-weight-bold">' +
                state +
                '</h4>' +
                '<div class="ml-auto align-self-center d-flex">' +
                '<span class="fa fa-2x fa-cny"></span>' +
                '<h4 class="ml-2 align-self-center font-weight-bold">' + this.cost + '元</h4>' +
                '</div>' +
                '<div class="ml-3 align-self-center">' +
                btnInfo +
                '</div>' +
                '</div>' +
                '</div>';
            $mySend.append(content)
        })

    }


    $(document).ready(function () {
        $("#update").click(function () {
            $("#userName").prop("readonly", false);
            $("#telephone").prop("readonly", false);
            $("#password").prop("readonly", false);
            $("#commit").prop("disabled", false);
        });

        $("#commit").click(function () {
            var formDate = new FormData($("#updateForm")[0]);
            console.log(formDate)
            if (confirm("你确定修改吗？")) {
                $.ajax({
                    async: true,
                    type: "post",
                    data: formDate,
                    processData: false,
                    contentType: false,
                    url: "/user/updateUserView",
                    success: function (result) {
                        if (result === true) {
                            layer.msg("修改成功");
                            localStorage.removeItem('autoLogin')
                        } else {
                            layer.msg("修改失败");
                        }
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)

                        // 渲染
                        // $("#userName").val(result.userName);
                        // $("#telephone").val(result.userPhone);
                        //
                        // var userFace = result.userFace;
                        //
                        // if (userFace == null) {
                        //     $("#userFacePanel").prop("src", "images/blog1.jpg");
                        // } else {
                        //     $("#userFacePanel").prop("src", "/fileDownload/getUserFace?fileName=" + userFace);
                        // }
                    },
                    error: function () {
                        alert("异步请求失败！");
                    }
                });
            }
        });
    });
</script>
</body>
</html>
